<!DOCTYPE HTML>
<html lang="no" >
<!-- Innlevering av prosjektoppgave i HTML5 på HIST 

URL for å få data til å fungere:
http://stud.aitel.hist.no/~ronna/prosjekt/index.html

-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.js"></script-->
<!--script src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"></script-->
<!--script src="http://cachedcommons.org/cache/modernizr/1.5.0/javascripts/modernizr.js"></script-->

<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>

<!--[if lt IE 9]>
<!--script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script-->
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<![endif]-->

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="js/propertystore.js"></script>
<script type="text/javascript" src="js/pagecolor.js"></script>
<script type="text/javascript" src="js/parkdata.js"></script>
<script type="text/javascript" src="js/stats.js"></script>
<script type="text/javascript" src="js/map.js"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

// document ready loader
jQuery(document).ready(function() {
        // init and set of localstorage properties
        initPropertyStore();
        // Start the server communication
	 	startServerComm();
	 	// Show map
	 	showMap();
	 	
	 	// To show the parking locations...
	 	updateIcons('P1,50,50;P2,10,10;P3,150,150;P4,250,250');
	 	
	 	// Set the tag to update the stats on the front page
	 	setParkIdUpdate("oversikt");
		setPage(1);
		keepMapCentered(true);
		initStats();
		visParkStat();
		
		// If the gps pos is checked - check it again...
		initShowPosision();
});

// Checkbox is checked/unchecked
function toggleGpsShow() {
	var domChk = $("#chkShowPosisition")[0];
	if(SETTINGS_enableLocation==0) {
		SETTINGS_enableLocation = 1;
	} else {
		SETTINGS_enableLocation = 0;
	}
	domChk.checked = (SETTINGS_enableLocation==1 ? true : false);
	saveProperties();
	updateGpsTimer(SETTINGS_enableLocation);
}

// Init show me choice
function initShowPosision() {
	
	var domChk = $("#chkShowPosisition")[0];
	domChk.checked = (SETTINGS_enableLocation==1 ? true : false);
	updateGpsTimer(SETTINGS_enableLocation);
}

function setPage(whichPage) {
	// Close all pages and open the seleced
	//$("[name='menupage']").hide();
	//$(".pageClass").css("display","none");
	$("#page1").css("display","none");
	$("#page2").css("display","none");
	
	var getPage = $("#page"+whichPage);
	$("#page"+whichPage).css("display","");
}

function showStats() {
	$("#page2").show();
	$("#page1").hide();
	$("#showStatistics").hide();
	$("#hideStatistics").show();
}

function hideStats() {
	$("#page1").show();
	$("#page2").hide();
	$("#hideStatistics").hide();
	$("#showStatistics").show();
}

function changeBackgroundColor(color){
	try {
		$('body').css('background-color', color);
	}
	catch (e){
		alert(e)
	}
}
</script>


</head>
<body>
<nav class="theNav">

<input type="button" class="button buttonStats" id="showStatistics" value="Vis statistikk" onclick="showStats()">
<input type="button" class="button" id="hideStatistics" value="Tilbake til kart" onclick="hideStats()" style="display: none;">


<!-- 	<ul> -->
<!-- 		<li onclick="javascript:setPage(1); return false;">Side 1</li> -->
<!-- 		<li onclick="javascript:setPage(2); return false;">Side 2</li> -->
<!-- 	</ul> -->
</nav>

<span id="page1">
<header>
<h1>Parkeringshjelperen</h1>
</header>
<span class="pageClass" id="oversikt">Oversikt kommer her.</span>
<input type="button" class="button" id="showTestPane" value="Vis testpanel" onclick="showTestPane();">
<input type="button" class="button" id="hideTestPane" value="Skjul testpanel" onclick="hideTestPane();" style="display:none">

<input type="button" class="button buttonSettings" id="showSettingsPane" value="Vis oppsett" onclick="showSettingsPane();">
<input type="button" class="button buttonSettings" id="hideSettingsPane" value="Skjul oppsett" onclick="hideSettingsPane();" style="display:none">


<div id="testPane" style="display:none">
<!-- START test data buttons -->
<input type="button" class="button" value="Sim1" onClick="javascript:parseData('P1,50,50;P2,10,10;P3,140,150;P4,200,250');updateIcons('P1,50,50;P2,10,10;P3,140,150;P4,200,250');return false"/>
<input type="button" class="button" value="Sim2" onClick="javascript:parseData('P1,45,50;P2,7,10;P3,70,150;P4,244,250');updateIcons('P1,45,50;P2,7,10;P3,70,150;P4,244,250');return false"/>
<input type="button" value="Sim3 med rød" onClick="javascript:parseData('P1,0,50;P2,0,10;P3,70,150;P4,244,250');updateIcons('P1,0,50;P2,0,10;P3,70,150;P4,244,250');return false"/>
<input type="button" value="Sim4 med gul" onClick="javascript:parseData('P1,4,50;P2,1,10;P3,70,150;P4,244,250');updateIcons('P1,4,50;P2,1,10;P3,70,150;P4,244,250');return false"/>

<!--forslag til gps-flytting.. fungerer nå.-->
<input type="button" value="G1" onClick="javascript:updateGPSPos(60.384123, 5.317511);return false"/>
<input type="button" value="G2" onClick="javascript:updateGPSPos(60.384684, 5.318229);return false"/>
<input type="button" value="G3" onClick="javascript:updateGPSPos(60.385755, 5.319731);return false"/>
<input type="button" value="G4" onClick="javascript:updateGPSPos(60.385879, 5.323171);return false"/>
<input type="button" value="G-" onClick="javascript:updateGPSPos(null, null);return false"/>
<input type="button" value="MapCenter" onClick="javascript:setMapCenter();return false"/>
<input type="button" value="Ctrue" onClick="javascript:keepMapCentered(true);return false"/>
<input type="button" value="Cfalse" onClick="javascript:keepMapCentered(false);return false"/>
<!-- END test data buttons -->
</div>
<div id="settingsPane" style="display:none">
	
		Bakgrunnsfarge: <input type="color" onchange="changeBackgroundColor(this.value);"/>	
		
		<input type="checkbox" id="chkShowPosisition" onClick="javascript:toggleGpsShow();"/>Vis min posisjon&nbsp; 
		<a href="#" onClick="javascript:centerAll();return false;">Zoom alt</a>
		<br>
		<input type="checkbox" id="filterFlagCheckBox" onclick="checkboxFilterClicked()"/>Vis bare parkeringsplasser som har flere ledige plasser
		<div id="filterSlider" style="display:none">
		Minimum antall ledige parkeringsplasser: <span id="parkIconFilterValue">25</span> Endre:<input type="range" min="0" max="50" value="25" onchange="updateParkIconFilterValue(this.value)"/>
		</div>
</div>
<div id="map_canvas" style="width:100%; height:90%"></div>
</span>


<span class="pageClass" id="page2">
&nbsp;Prosentvis ledig kapasitet siden du startet. <input type="button" class="button buttonRefresh" value="Oppdater" onClick="javascript:visParkStat();return false"/>
<div id="parkInfo"></div>
<canvas id="stats" class="stats" width="500" height="500"></canvas>
<br/>
Sett av/på :
<span id="parkStatToggles"></span>
<label id="debug2"></label>
</span>

<footer>
<p>Copyright - Din lokale parkeringsplass</p>
</footer>

</body>
</html>
